<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的文章</title>
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.js"></script>
<link rel="stylesheet" href="/resource/css/bootstrap.css">

<style type="text/css">
/* 限制文章详情中图片的大小，最大宽度为400px */
 img {
	max-width:400px;
}

</style>
</head>
<body>
	<div class="container">
		
		<ul class="list-unstyled">
			<c:forEach items="${info.list}" var="article">
				<li class="media">
					<!-- 文章标题图片 -->
					<div class="col-md-2">
						<img src="${article.picture}" height="100" width="100">
					</div>
					
					<!-- 文章名称 -->
					<div class="col-md-10">		
						<span ><h5><b>${article.title }</b></h5></span>
						${article.displayTime }
						<button type="button" onclick="detail(${article.id})" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" >详情</button>
					</div>	
				</li>
				<hr>
			</c:forEach>
		</ul>
		
		<!-- 加载分页页面 -->
		<jsp:include page="/WEB-INF/view/common/pages.jsp"></jsp:include>
		
	</div>
	
	
	<!-- 文章详情的模态框 -->
	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <h5 class="modal-title" id="exampleModalLabel"></h5>
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	          <span aria-hidden="true">&times;</span>
	        </button>
	      </div>
	      <div class="modal-body" id="content">
	       	
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
	      </div>
	    </div>
	  </div>
	</div>
</body>
<script type="text/javascript">
	//查询文章详情
	function detail(id){
		
		//使用ajax查询数据
		$.post(
			"/my/detail",
			{id:id},
			function(article){
				//展示数据
				//设置标题
				$("#exampleModalLabel").html(article.title);
				
				//设置内容
				$("#content").html(article.content);
			}
		)
	}
	
	//分页
	function goPage(pageNum){
		
		//location="/my/articles?pageNum="+pageNum;
		//整合个人中心首页以后
		$("#center").load("/my/articles?pageNum="+pageNum);
	}
	
	
</script>
</html>

